<template>
  <el-card>
    <div class="block">
      <span class="demonstration">调出专业</span>
      <el-select
        v-model="departmentvalues"
        placeholder="请选择调出专业"
        @change="depentschange"
        clearable
      >
        <el-option
          v-for="item in departmentsoptions"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="classvalues"
        placeholder="请选择调出班级"
        @change="classchange"
        clearable
      >
        <el-option
          v-for="item in classoptions"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <br />
    <div class="block">
      <span class="demonstration">调入班级</span>
      <!-- <el-select v-model="cause" placeholder="请选择调整原因">
        <el-option
          v-for="item in causes"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select> -->
      <span style="display: inline-block; width: 150px">
        <el-input v-model="cause" placeholder="请选择调整原因"></el-input
      ></span>

      <el-select
        v-model="departmentvalues2"
        placeholder="请选择调入专业"
        @change="depentschange2"
        clearable
      >
        <el-option
          v-for="item in departmentsoptions"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>

      <el-select v-model="classvalues2" placeholder="请选择调入班级" clearable>
        <!-- @change="classchange2" -->
        <el-option
          v-for="item in classoptions"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button @click="baocun">保存</el-button>
      <el-button>取消</el-button>
    </div>

    <el-card>
      <h3>未选学生</h3>
      <div>
        <el-tag
          class="tags"
          v-for="(item, index) in notSelected"
          :key="index"
          @click="tagclick(index)"
        >
          {{ item.name }}
          <!-- {{item.phone}} -->
        </el-tag>
      </div>
    </el-card>
    <el-card>
      <h3>已选学生</h3>
      <el-tag class="tags" v-for="(item2, index) in selected" :key="index">{{
        item2.name
      }}</el-tag>
    </el-card>
  </el-card>
</template>

<script>
import { getStus, changeclass } from "network/api/students";
import { getAllDepartmentColl, getallDepartment } from "network/api/department"; // 获取所有学院接口
import { getallClasses, getcollcls } from "network/api/classes"; //  根据学院获取班级接口
export default {
  data() {
    return {
      notSelected: [], //  该班级学生
      selected: [], //  选择调整学生
      departmentvalues: "", // 原来专业
      classvalues: "", // 原来班级
      departmentsoptions: [], // 所有部门
      classoptions: [], //  所有班级
      departmentvalues2: "", // 调入专业
      classvalues2: "", // 调入班级
      cause: "", //调整原因
      causes: [
        // 调整原因列表
        { name: "升班", id: 1 },
        { name: "末班", id: 2 },
        { name: "休学", id: 3 },
        { name: "新生入学", id: 4 },
      ],
    };
  },
  methods: {
    async baocun() {
      // 发送学生更改结果     校验功能
      console.log({
        调整学生: this.selected,
        原来专业: this.departmentvalues,
        原来班级: this.classvalues,
        调入专业: this.departmentvalues2,
        调入班级: this.classvalues2,
        调整原因: this.cause,
      });
      if (this.selected==''){ 
        this.$message.warning('调整学生不能为空')
      }else if(this.departmentvalues==''){
        this.$message.warning('调出专业不能为空')
      }else if(this.classvalues==''){
        this.$message.warning('调出班级不能为空')
      }else if(this.departmentvalues2==''){
        this.$message.warning('调入专业不能为空')
      }else if(this.classvalues2==''){
        this.$message.warning('调入班级不能为空')
      }else if(this.departmentvalues==''){
        this.$message.warning('调出专业不能为空')
      }else if(this.cause==''){
        this.$message.warning('调整原因不能为空')
      }else{
        var res = await changeclass({
        selected: this.selected,
        departmentvalues: this.departmentvalues,
        classvalues: this.classvalues,
        departmentvalues2: this.departmentvalues2,
        classvalues2: this.classvalues2,
        cause: this.cause,
      });
      }
      try {
      if (res.status=='Yes'){
          this.$message.success(res.msg)
          this.selected=[]
          this.departmentvalues=''
          this.departmentvalues2=''
          this.classvalues=''
          this.classvalues2=''
          this.cause=''

      }
      else{
          this.$message.error(res.msg)
      }
      } catch (error) {
        
      }

    },
    tagclick(index) {
      this.selected.push(this.notSelected[index]);
      this.notSelected.splice(index, 1);
    },
    // 获取所有学院
    async getAllDepartmentColls() {
      var res = await getAllDepartmentColl();
      this.departmentsoptions = res;
      // console.log(res);
    },
    //   获取调入专业
    depentschange2() {
      if (this.departmentvalues2) {
        this.getcollclss(this.departmentvalues2);
      } else {
        this.classvalues2 = "";
        this.classoptions = [];
      }
    },

    //  根据学院获取班级
    async getcollclss(dep) {
      var res = await getcollcls(dep);
      this.classoptions = res;
      console.log(this.classoptions);
    },
    // 选择调出专业
    depentschange() {
      if (this.departmentvalues != "") {
        this.getcollclss(this.departmentvalues);
      } else {
        this.departmentsoptions = "";
        this.departmentsoptions = [];
      }
    },
    //  根据班级id获取所有学生
    async getStus() {
      var res = await getStus(this.classvalues);
      this.notSelected = res.students;
      console.log(res.students);
    },
    // 选择调出班级
    classchange() {
      console.log(this.classvalues);
      if (this.classvalues) {
        this.getStus();
      }
    },
  },
  created() {
    this.getAllDepartmentColls();
  },
};
</script>

<style>
.tags {
  margin: 4px;
}
</style>
